<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站手机端滚动公告组件</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #1877F2; /* 社交主题色 */
      --secondary: #6c757d;
      --light: #f8f9fa;
      --dark: #343a40;
      --white: #ffffff;
      --border: #eee;
      --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      
      /* 公告类型主题色 */
      --notice-info: #e3f2fd;
      --notice-info-text: #0d47a1;
      --notice-success: #e8f5e9;
      --notice-success-text: #1b5e20;
      --notice-warning: #fff8e1;
      --notice-warning-text: #ff8f00;
      --notice-error: #ffebee;
      --notice-error-text: #c62828;
      --notice-promo: #f3e5f5;
      --notice-promo-text: #6a1b9a;
      --notice-activity: #e0f7fa;
      --notice-activity-text: #00695c;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f5f5;
      color: var(--dark);
      min-height: 100vh;
      padding: 0;
      margin: 0;
    }
    
    .container {
      max-width: 420px;
      margin: 0 auto;
      background-color: var(--white);
      min-height: 100vh;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }
    
    /* 顶部导航栏 */
    .top-nav {
      background-color: var(--primary);
      color: white;
      padding: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .logo {
      font-size: 20px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .nav-actions {
      display: flex;
      gap: 15px;
    }
    
    .action-btn {
      background: none;
      border: none;
      color: white;
      font-size: 20px;
      cursor: pointer;
    }
    
    /* 公告容器 */
    .announcement-container {
      width: 100%;
      overflow: hidden;
      position: relative;
      border-bottom: 1px solid var(--border);
      transition: all 0.3s ease;
    }
    
    /* 滚动公告基础样式 */
    .announcement {
      display: none;
      align-items: center;
      padding: 10px 15px;
      position: relative;
      animation: slideIn 0.5s ease forwards;
    }
    
    .announcement.active {
      display: flex;
    }
    
    .announcement-icon {
      margin-right: 12px;
      font-size: 20px;
      flex-shrink: 0;
    }
    
    .announcement-content {
      flex: 1;
      padding-right: 30px;
      position: relative;
    }
    
    .announcement-text {
      margin: 0;
      font-size: 14px;
      line-height: 1.4;
    }
    
    .announcement-link {
      color: inherit;
      font-weight: 500;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    
    .close-announcement {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      font-size: 16px;
      cursor: pointer;
      opacity: 0.7;
      transition: opacity 0.2s;
    }
    
    .close-announcement:hover {
      opacity: 1;
    }
    
    /* 公告类型样式 */
    .announcement-info {
      background-color: var(--notice-info);
      color: var(--notice-info-text);
    }
    
    .announcement-success {
      background-color: var(--notice-success);
      color: var(--notice-success-text);
    }
    
    .announcement-warning {
      background-color: var(--notice-warning);
      color: var(--notice-warning-text);
    }
    
    .announcement-error {
      background-color: var(--notice-error);
      color: var(--notice-error-text);
    }
    
    .announcement-promo {
      background-color: var(--notice-promo);
      color: var(--notice-promo-text);
    }
    
    .announcement-activity {
      background-color: var(--notice-activity);
      color: var(--notice-activity-text);
    }
    
    /* 滚动动画容器 */
    .scroll-container {
      overflow: hidden;
      position: relative;
    }
    
    .scroll-content {
      display: flex;
      animation: scroll 15s linear infinite;
    }
    
    .scroll-item {
      white-space: nowrap;
      padding-right: 40px;
    }
    
    /* 多公告轮播样式 */
    .carousel-announcement {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 10px 15px;
    }
    
    .carousel-item {
      display: none;
      animation: fadeIn 0.5s ease forwards;
    }
    
    .carousel-item.active {
      display: block;
    }
    
    .carousel-indicators {
      display: flex;
      justify-content: center;
      gap: 5px;
      margin-top: 5px;
    }
    
    .carousel-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.2);
    }
    
    .carousel-dot.active {
      background-color: var(--primary);
    }
    
    /* 内容区域 */
    .content-area {
      padding: 15px;
    }
    
    .feed-item {
      background-color: white;
      border-radius: 12px;
      box-shadow: var(--shadow);
      overflow: hidden;
      margin-bottom: 15px;
    }
    
    .feed-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    
    .feed-content {
      padding: 15px;
    }
    
    .feed-title {
      font-weight: 600;
      margin-bottom: 8px;
    }
    
    .feed-text {
      font-size: 14px;
      color: #666;
      margin-bottom: 0;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1010;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid #eee;
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .switcher-option:hover {
      background-color: #f9f9f9;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 控制按钮 */
    .control-buttons {
      padding: 15px;
      display: flex;
      gap: 10px;
    }
    
    .control-btn {
      flex: 1;
      padding: 10px;
      border: none;
      border-radius: 8px;
      background-color: var(--primary);
      color: white;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }
    
    .control-btn.secondary {
      background-color: #f5f5f5;
      color: var(--dark);
    }
    
    /* 动画效果 */
    @keyframes scroll {
      0% { transform: translateX(100%); }
      100% { transform: translateX(-100%); }
    }
    
    @keyframes slideIn {
      from { transform: translateY(-100%); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
    
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    /* 响应式调整 */
    @media (max-width: 360px) {
      .announcement-text {
        font-size: 13px;
      }
      
      .switcher-option {
        padding: 10px 14px;
        font-size: 13px;
      }
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">选择公告样式</div>
    <div class="switcher-option active" data-style="1">普通通知</div>
    <div class="switcher-option" data-style="2">横向滚动</div>
    <div class="switcher-option" data-style="3">多内容轮播</div>
    <div class="switcher-option" data-style="4">带图公告</div>
    <div class="switcher-option" data-style="5">互动公告</div>
    <div class="switcher-option" data-style="6">重要提示</div>
  </div>
  
  <div class="container">
    <!-- 顶部导航 -->
    <div class="top-nav">
      <div class="logo">
        <i class="fa fa-connectdevelop"></i>
        <span>社交圈</span>
      </div>
      <div class="nav-actions">
        <button class="action-btn">
          <i class="fa fa-bell-o"></i>
        </button>
        <button class="action-btn">
          <i class="fa fa-user-o"></i>
        </button>
      </div>
    </div>
    
    <!-- 公告容器 -->
    <div class="announcement-container">
      <!-- 样式1：普通通知公告 -->
      <div class="announcement announcement-info active" id="style1">
        <i class="fa fa-info-circle announcement-icon"></i>
        <div class="announcement-content">
          <p class="announcement-text">系统将于今晚23:00-次日02:00进行维护，期间可能无法正常使用，敬请谅解。</p>
        </div>
        <button class="close-announcement">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <!-- 样式2：横向滚动公告 -->
      <div class="announcement announcement-promo" id="style2">
        <i class="fa fa-gift announcement-icon"></i>
        <div class="scroll-container">
          <div class="scroll-content">
            <div class="scroll-item">
              <p class="announcement-text">新用户注册即送30天会员特权，<a href="#" class="announcement-link">立即注册</a></p>
            </div>
            <div class="scroll-item">
              <p class="announcement-text">邀请好友加入可获得积分奖励，积分可兑换精美礼品</p>
            </div>
            <div class="scroll-item">
              <p class="announcement-text">本周六晚8点直播抽奖，千万豪礼等你来拿</p>
            </div>
          </div>
        </div>
        <button class="close-announcement">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <!-- 样式3：多内容轮播公告 -->
      <div class="announcement announcement-activity" id="style3">
        <i class="fa fa-calendar announcement-icon"></i>
        <div class="carousel-announcement">
          <div class="carousel-item active">
            <p class="announcement-text">【线下活动】本周末将举办摄影交流会，<a href="#" class="announcement-link">点击报名</a></p>
          </div>
          <div class="carousel-item">
            <p class="announcement-text">【话题挑战】#最美家乡# 活动开始啦，参与有机会获得奖品</p>
          </div>
          <div class="carousel-item">
            <p class="announcement-text">【新功能】视频直播功能已上线，快来体验吧</p>
          </div>
          <div class="carousel-indicators">
            <div class="carousel-dot active"></div>
            <div class="carousel-dot"></div>
            <div class="carousel-dot"></div>
          </div>
        </div>
        <button class="close-announcement">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <!-- 样式4：带图公告 -->
      <div class="announcement announcement-success" id="style4">
        <div style="display: flex; width: 100%;">
          <div style="flex: 2;">
            <p class="announcement-text">恭喜您获得"年度活跃用户"称号，点击领取专属勋章和礼包</p>
          </div>
          <div style="flex: 1; padding-left: 10px;">
            <img src="https://picsum.photos/id/28/100/100" alt="勋章" style="width: 60px; height: 60px; border-radius: 8px; object-fit: cover;">
          </div>
        </div>
        <button class="close-announcement">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <!-- 样式5：互动公告 -->
      <div class="announcement announcement-warning" id="style5">
        <i class="fa fa-hand-pointer-o announcement-icon"></i>
        <div class="announcement-content">
          <p class="announcement-text">您有3位好友请求待处理，<a href="#" class="announcement-link">点击查看</a></p>
          <div style="display: flex; gap: 5px; margin-top: 8px;">
            <img src="https://picsum.photos/id/64/100" alt="好友" style="width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid white;">
            <img src="https://picsum.photos/id/65/100" alt="好友" style="width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid white; margin-left: -10px;">
            <img src="https://picsum.photos/id/66/100" alt="好友" style="width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid white; margin-left: -10px;">
          </div>
        </div>
        <button class="close-announcement">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <!-- 样式6：重要提示 -->
      <div class="announcement announcement-error" id="style6">
        <i class="fa fa-exclamation-circle announcement-icon"></i>
        <div class="announcement-content">
          <p class="announcement-text">您的账号存在安全风险，请尽快<a href="#" class="announcement-link">完善个人信息</a>并修改密码，保障账号安全。</p>
        </div>
        <button class="close-announcement">
          <i class="fa fa-times"></i>
        </button>
      </div>
    </div>
    
    <!-- 控制按钮 -->
    <div class="control-buttons">
      <button class="control-btn" id="prevBtn">
        <i class="fa fa-chevron-left"></i> 上一个
      </button>
      <button class="control-btn" id="nextBtn">
        下一个 <i class="fa fa-chevron-right"></i>
      </button>
    </div>
    
    <!-- 内容区域 -->
    <div class="content-area">
      <div class="feed-item">
        <img src="https://picsum.photos/id/1015/800/600" alt="动态图片" class="feed-image">
        <div class="feed-content">
          <div class="feed-title">城市公园的日落</div>
          <p class="feed-text">今天傍晚在城市公园散步，偶遇绝美日落，分享给大家...#自然风光 #城市生活</p>
        </div>
      </div>
      
      <div class="feed-item">
        <img src="https://picsum.photos/id/292/800/600" alt="动态图片" class="feed-image">
        <div class="feed-content">
          <div class="feed-title">新尝试的蛋糕配方</div>
          <p class="feed-text">周末在家尝试了新的蛋糕配方，味道还不错😊 #美食 #烘焙</p>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前状态
    let currentStyle = 1;
    let carouselIndex = 0;
    let carouselInterval;
    
    // DOM元素
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const announcements = {
      1: document.getElementById('style1'),
      2: document.getElementById('style2'),
      3: document.getElementById('style3'),
      4: document.getElementById('style4'),
      5: document.getElementById('style5'),
      6: document.getElementById('style6')
    };
    const closeButtons = document.querySelectorAll('.close-announcement');
    const prevButton = document.getElementById('prevBtn');
    const nextButton = document.getElementById('nextBtn');
    const carouselItems = document.querySelectorAll('.carousel-item');
    const carouselDots = document.querySelectorAll('.carousel-dot');
    
    // 初始化
    function init() {
      // 切换公告样式
      switcherOptions.forEach(option => {
        option.addEventListener('click', function() {
          const style = parseInt(this.getAttribute('data-style'));
          switchStyle(style);
        });
      });
      
      // 关闭公告
      closeButtons.forEach(btn => {
        btn.addEventListener('click', function() {
          this.closest('.announcement').style.display = 'none';
        });
      });
      
      // 上一个/下一个按钮
      prevButton.addEventListener('click', showPrevStyle);
      nextButton.addEventListener('click', showNextStyle);
      
      // 初始化轮播
      initCarousel();
      
      // 公告链接点击
      document.querySelectorAll('.announcement-link').forEach(link => {
        link.addEventListener('click', function(e) {
          e.preventDefault();
          alert('跳转到相关页面: ' + this.textContent);
        });
      });
    }
    
    // 初始化轮播
    function initCarousel() {
      // 启动自动轮播
      carouselInterval = setInterval(nextCarousel, 3000);
      
      // 点击指示点切换
      carouselDots.forEach((dot, index) => {
        dot.addEventListener('click', () => {
          goToCarousel(index);
        });
      });
    }
    
    // 轮播下一项
    function nextCarousel() {
      carouselIndex = (carouselIndex + 1) % carouselItems.length;
      goToCarousel(carouselIndex);
    }
    
    // 跳转到指定轮播项
    function goToCarousel(index) {
      // 清除当前活跃状态
      carouselItems.forEach(item => item.classList.remove('active'));
      carouselDots.forEach(dot => dot.classList.remove('active'));
      
      // 设置新的活跃状态
      carouselItems[index].classList.add('active');
      carouselDots[index].classList.add('active');
      
      // 更新索引
      carouselIndex = index;
      
      // 重置轮播计时器
      clearInterval(carouselInterval);
      carouselInterval = setInterval(nextCarousel, 3000);
    }
    
    // 切换公告样式
    function switchStyle(style) {
      // 隐藏所有公告
      Object.values(announcements).forEach(announcement => {
        announcement.classList.remove('active');
      });
      
      // 显示选中公告
      announcements[style].classList.add('active');
      announcements[style].style.display = 'flex';
      
      // 更新当前样式
      currentStyle = style;
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (parseInt(option.getAttribute('data-style')) === style) {
          option.classList.add('active');
        }
      });
    }
    
    // 显示上一个样式
    function showPrevStyle() {
      let prev = currentStyle - 1;
      if (prev < 1) prev = 6;
      switchStyle(prev);
    }
    
    // 显示下一个样式
    function showNextStyle() {
      let next = currentStyle + 1;
      if (next > 6) next = 1;
      switchStyle(next);
    }
    
    // 启动
    init();
  </script>
</body>
</html>
